<template>
  <div id="demoPlayer" ref="demoPlayer">
    <Modal v-model="playModal"  title="视频播放" width="900px" :mask-closable="false" :closable="true">
    <div class="root" ref="demoPlayer">
      <div class="container-shell">
        <div id="container"></div>
        <div class="input">
          <div>输入URL：</div>
          <input
            autocomplete="on"
            id="playUrl"
            value=""
          />
          <button id="play">播放</button>
          <button id="pause" style="display: none">停止</button>
        </div>
        <div class="input" style="line-height: 30px">
          <button id="destroy">销毁</button>
        </div>
      </div>
    </div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: 'demoPlayer',
  data(){
    return{
      playModal: false,
      jessibuca:null,
      $player:null,
      $pause:null,
      $playHref:null,
      $container:null,
      $destroy:null,
      showOperateBtns:false,
      forceNoOffscreen:true,
      baseUrl: process.env.BASE_URL,
    }
  },
  methods:{
    create() {
      this.jessibuca = new Jessibuca({
        container: this.$container,
        videoBuffer: 0.2, // 缓存时长
        isResize: false,
        isFlv: true,
        decoder: this.baseUrl+"jessplayer/decoder.js",
        text: "",
        loadingText: "",
        useMSE: false,
        debug: true,
        showBandwidth: this.showOperateBtns, // 显示网速
        operateBtns: {
          fullscreen: this.showOperateBtns,
          screenshot: this.showOperateBtns,
          play: this.showOperateBtns,
          audio: false,
          recorder: false
        },
        forceNoOffscreen: this.forceNoOffscreen,
        isNotMute: false,
      },);

      jessibuca.onLog = msg => console.error(msg);
      jessibuca.onRecord = (status) => console.log('onRecord', status);
      jessibuca.onPause = () => console.log('onPause');
      jessibuca.onPlay = () => console.log('onPlay');
      jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
      jessibuca.onMute = msg => console.log('onMute', msg);
      this.$player.style.display = 'inline-block';
      this.$pause.style.display = 'none';
      this.$destroy.style.display = 'none';
    },
    play(url){
      if (!!this.jessibuca){
        this.jessibuca.destroy();
      }
      this.create();
      this.jessibuca.play(url);
      this.$playHref.value=url;
      this.playModal = true;
    }
  },
  mounted(){
    this.$player = document.getElementById('play');
    this.$pause = document.getElementById('pause');
    this.$playHref = document.getElementById('playUrl');
    this.$container = document.getElementById('container');
    this.$destroy = document.getElementById('destroy');

    this.create();

    this.$player.addEventListener('click', function () {
      var href = this.$playHref.value;
      if (href) {
        jessibuca.play(href);
        this.$player.style.display = 'none';
        this.$pause.style.display = 'inline-block';
        this.$destroy.style.display = 'inline-block';
      }
    }, false)


    this.$pause.addEventListener('click', function () {
      this.this.$player.style.display = 'inline-block';
      this.this.$pause.style.display = 'none';
      jessibuca.pause();
    })

    this.$destroy.addEventListener('click', function () {
      if (jessibuca) {
        jessibuca.destroy();
      }
      this.create();
    })
  }
}


</script>
<style>
.root {
  display: flex;
  place-content: center;
  margin-top: 3rem;
}

.container-shell {
  backdrop-filter: blur(5px);
  background: hsla(0, 0%, 50%, 0.5);
  padding: 30px 4px 10px 4px;
  /* border: 2px solid black; */
  width: auto;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 10px 20px;
}

.container-shell:before {
  content: "jessibuca demo player";
  position: absolute;
  color: darkgray;
  top: 4px;
  left: 10px;
  text-shadow: 1px 1px black;
}

#container {
  background: rgba(13, 14, 27, 0.7);
  width: 640px;
  height: 398px;
}

.input {
  display: flex;
  margin-top: 10px;
  color: white;
  place-content: stretch;
}

.input2 {
  bottom: 0px;
}

.input input {
  flex: auto;
}

.err {
  position: absolute;
  top: 40px;
  left: 10px;
  color: red;
}

.option {
  position: absolute;
  top: 4px;
  right: 10px;
  display: flex;
  place-content: center;
  font-size: 12px;
}

.option span {
  color: white;
}

.page {
  /*background: url("./jessplayer/bg.jpg");*/
  background-repeat: no-repeat;
  background-position: top;
}

@media (max-width: 720px) {
  #container {
    width: 90vw;
    height: 52.7vw;
  }
}
</style>
